<style lang="less" rel="stylesheet/less" scoped>
	.content{ 
		.buttonBar{ padding: 0.6rem 0.3rem 0.3rem; background:#fff; li{width: 20%;height: 0.6rem;border: 0.02rem solid #000;text-align: center;line-height: 0.6rem;float: left;margin: 0 6.5% 0.3rem 0;border-radius: 0.08rem; }
			li:nth-of-type(4),li:nth-of-type(8){margin-right: 0;}
			}
		.contentList{background:#fff;margin-top: 0.2rem;padding-bottom: 5rem; .item{padding: 0.1rem 0.3rem 0.1rem; border-bottom: 0.02rem solid #f8f8f8; .title{ height: 0.8rem;line-height: 0.8rem;color: #000;font-size: 0.28rem;}
				.msg{color: #B3B3B3;font-size: 0.2rem;padding-bottom: 0.4rem;}
				}
			}
		}

</style>
<template>
	<div class="content">
		<ul class="buttonBar clearfix">
			<li>押金充值</li>
			<li>办卡指南</li>
			<li>借书还书</li>
			<li>快递业务</li>
			<li>图书漂流</li>
			<li>阅读社区</li>
			<li>积分规则</li>
			<li>联系我们</li>
		</ul>
		<div class="contentList">
			<div class="item" v-for="item in textItem" @click="checkItem(item)">
				<div class="box-between title">
					<span>{{item.title}}</span>
					<i class="school " :class="item.flag?'icon-bottom':'icon-right'"></i>
				</div>
				<div class="msg" v-show="item.flag">
					{{item.msg}}
				</div>

			</div>
		</div>

	</div>
</template>

<script>
	import p3 from '../../assets/img/p3.jpg'
	import p1 from '../../assets/img/icon_checkbox.png'

	export default {
		name: '',
		//数据
		data() {
			return {
				textItem: [{
						title: '如何借书？',
						msg: '我们鼓励您尽快看完书籍，以便于其他人借阅。过期后0.2元/天我们鼓励您尽快看完书籍， 以便于其他人借阅。 过期后0 .2 元 / 天我们鼓励您尽快看完书籍， 以便于其他人借阅。 过期后0 .2 元 / 天我们鼓励您尽快看完书籍， 以便于其他人借阅。 过期后0 .2 元 / 天我们鼓励您尽快看完书籍， 以便于其他人借阅。 过期后0 .2 元 / 天 ',flag:false},
						{
						title: '如何借书？',
						msg: '我们鼓励您尽快看完书籍，以便于其他人借阅。过期后0.2元/天我们鼓励您尽快看完书籍， 以便于其他人借阅。 过期后0 .2 元 / 天我们鼓励您尽快看完书籍， 以便于其他人借阅。 过期后0 .2 元 / 天我们鼓励您尽快看完书籍， 以便于其他人借阅。 过期后0 .2 元 / 天我们鼓励您尽快看完书籍， 以便于其他人借阅。 过期后0 .2 元 / 天 ',flag:false},
						{
						title: '如何借书？',
						msg: '我们鼓励您尽快看完书籍，以便于其他人借阅。过期后0.2元/天我们鼓励您尽快看完书籍， 以便于其他人借阅。 过期后0 .2 元 / 天我们鼓励您尽快看完书籍， 以便于其他人借阅。 过期后0 .2 元 / 天我们鼓励您尽快看完书籍， 以便于其他人借阅。 过期后0 .2 元 / 天我们鼓励您尽快看完书籍， 以便于其他人借阅。 过期后0 .2 元 / 天 ',flag:false},
						{
						title: '如何借书？',
						msg: '我们鼓励您尽快看完书籍，以便于其他人借阅。过期后0.2元/天我们鼓励您尽快看完书籍， 以便于其他人借阅。 过期后0 .2 元 / 天我们鼓励您尽快看完书籍， 以便于其他人借阅。 过期后0 .2 元 / 天我们鼓励您尽快看完书籍， 以便于其他人借阅。 过期后0 .2 元 / 天我们鼓励您尽快看完书籍， 以便于其他人借阅。 过期后0 .2 元 / 天 ',flag:false},
						{
						title: '如何借书？',
						msg: '我们鼓励您尽快看完书籍，以便于其他人借阅。过期后0.2元/天我们鼓励您尽快看完书籍， 以便于其他人借阅。 过期后0 .2 元 / 天我们鼓励您尽快看完书籍， 以便于其他人借阅。 过期后0 .2 元 / 天我们鼓励您尽快看完书籍， 以便于其他人借阅。 过期后0 .2 元 / 天我们鼓励您尽快看完书籍， 以便于其他人借阅。 过期后0 .2 元 / 天 ',flag:false},
						{
						title: '如何借书？',
						msg: '我们鼓励您尽快看完书籍，以便于其他人借阅。过期后0.2元/天我们鼓励您尽快看完书籍， 以便于其他人借阅。 过期后0 .2 元 / 天我们鼓励您尽快看完书籍， 以便于其他人借阅。 过期后0 .2 元 / 天我们鼓励您尽快看完书籍， 以便于其他人借阅。 过期后0 .2 元 / 天我们鼓励您尽快看完书籍， 以便于其他人借阅。 过期后0 .2 元 / 天 ',flag:false},
						{
						title: '如何借书？',
						msg: '我们鼓励您尽快看完书籍，以便于其他人借阅。过期后0.2元/天我们鼓励您尽快看完书籍， 以便于其他人借阅。 过期后0 .2 元 / 天我们鼓励您尽快看完书籍， 以便于其他人借阅。 过期后0 .2 元 / 天我们鼓励您尽快看完书籍， 以便于其他人借阅。 过期后0 .2 元 / 天我们鼓励您尽快看完书籍， 以便于其他人借阅。 过期后0 .2 元 / 天 ',flag:false}

					]

				}
			},
			//计算属性
			computed: {

				},
				//组件
				components: {},
				//初始化数据
				mounted() {

				},
				//方法
				methods: {
					checkItem(items){
						items.flag=!items.flag
					}
				},
				//监听数据变化
				watch: {
					'$route' (to, from) {}
				}
		}
</script>